<template>
  <div class="category">
    <div class="category-nav">
      <nav-bar>
        <div slot="center">商品分类</div>
      </nav-bar>
    </div>
    <div class="content">
      <tab-menu :categories="categories" @selectItem="selectItem"></tab-menu>
      <div class="category-goods">
        <tab-control
          class="category-tab-control"
          :titles="['综合', '新品', '销量']"  
          @itemClick="tabClick"
        ></tab-control>
        <scroll id="tab-content" class="category-goods" :data="[categoryData]">
          <div>
            <tab-content-category :subcategories="showSubcategory"></tab-content-category>
            <tab-content-detail
              :category-detail="showCategoryDetail"
            ></tab-content-detail>
          </div>
        </scroll>
      </div>
    </div>
  </div>
</template>
<script>
import { getCategory, getSubcategory, getCategoryDetail } from "api/category";
import { POP, SELL, NEW } from "@/common/const";

import Scroll from "components/common/scroll/Scroll";
import NavBar from "components/common/navBar/NavBar";
import TabControl from "components/content/tabControl/TabControl";

import TabMenu from "./childComps/TabMenu";
import TabContentCategory from "./childComps/TabContentCategory";
import TabContentDetail from "./childComps/TabContentDetail";

import { tabControlMixin } from "@/common/mixin";
export default {
  name: "category",
  components: {
    Scroll,
    NavBar,
    TabControl,
    TabMenu,
    TabContentCategory,
    TabContentDetail,
  },
  mixins: [tabControlMixin],
  data() {
    return {
      categories: [],
      categoryData: {},
      currentIndex: -1,
    };
  },
  mounted() {
    // 1.请求分类数据
    this._getCategory();
  },
  computed: {
    showSubcategory() {
      if (this.currentIndex === -1) return {};
      return this.categoryData[this.currentIndex].subcategories;
    },
    showCategoryDetail() {
      if (this.currentIndex === -1) return [];
      return this.categoryData[this.currentIndex].categoryDetail[this.currentType].data;
    },
  },
  methods: {
    _getCategory() {
      getCategory().then((res) => {
        // 1.获取分类数据
        this.categories = res.data.data.category.list;
        // 2.初始化每个类别的子数据
        for (let i = 0; i < this.categories.length; i++) {
          this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              pop: [],
              new: [],
              sell: [],
            },
          };
        }
        // console.log(this.categoryData);
        // 3.请求第一个分类的数据
        this._getSubcategories(0);
      });
    },
    _getSubcategories(index) {
      this.currentIndex = index;
      const mailKey = this.categories[index].maitKey;
      getSubcategory(mailKey).then((res) => {
        this.categoryData[index].subcategories = res.data.data;
        this.categoryData = { ...this.categoryData };
        this._getCategoryDetail(POP);
        this._getCategoryDetail(SELL);
        this._getCategoryDetail(NEW);
      });
    },
    _getCategoryDetail(type) {
      // 1.获取请求的miniWallkey
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      // 2.发送请求,传入miniWallkey和type
      getCategoryDetail(miniWallkey, type).then((res) => {
        // 3.将获取的数据保存下来
        this.categoryData[this.currentIndex].categoryDetail[type] = res;
        this.categoryData = { ...this.categoryData };
      });
    },
    /**
     * 事件响应相关的方法(左侧分类的索引)
     */
    selectItem(index) {
      // this.currentIndex = index;
      this._getSubcategories(index);
    },
  },
};
</script>
<style lang="scss" scoped>
.category {
  position: relative;
  height: 100vh;
}
.category-nav {
  background: var(--color-high-text);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.category-goods {
  top: 40px;
}
.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 49px;
  display: flex;
}
.tab-control {
  z-index: 10;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
#tab-content {
  height: 100%;
  width: calc(100% - 100px);
  position: relative;
  left: 100px;
  padding: 44px 0 49px;
}
.category-tab-control {
  position: absolute;
  width: calc(100% - 100px);
  left: 100px;
  top: 44px ;
}
</style>
